/**
 * Created by guiyongdong on 2017/7/3.
 */
import React,{Component} from 'react';

import './Server.css';
import Utils from '../Utils';

export default class Server extends Component {

    _renderPhone() {
        return(
            <div className="Server">

                <div className="ServerItem">
                    <img src={require('../../image/app.png')} alt="app" style={{width:70,height:70}}/>
                    <p style={{fontSize:30,color:"white"}}>APP开发</p>
                    <p style={{fontSize:17, marginTop:15,marginLeft:10,marginRight:10,color:"white",fontWeight:200}}>郑州佰胜网络科技有限公司拥有国内顶级IOS和安卓开发团队</p>
                    <p style={{fontSize:17, marginTop:5,marginLeft:10,marginRight:10,color:"white",fontWeight:200}}>为您提供一站式的手机app定制开发服务</p>
                    <p style={{fontSize:17, marginTop:5,marginLeft:10,marginRight:10,color:"white",fontWeight:200}}>实现传统行业到移动互联的完美转型。</p>
                </div>
                <div className="ServerItem">
                    <img src={require('../../image/service_img_01.jpg')} alt="home" width="100%" height="100%"/>
                </div>
                <div className="ServerItem">
                    <img src={require('../../image/weixinhao.png')} alt="app" style={{width:70,height:70}}/>
                    <p style={{fontSize:30,color:"white"}}>微信公众号开发</p>
                    <p style={{fontSize:17, marginTop:15,marginLeft:10,marginRight:10,color:"white",fontWeight:200}}>郑州佰胜网络科技有限公司为您提供专业的微信公众平台二次开发</p>
                    <p style={{fontSize:17, marginTop:5,marginLeft:10,marginRight:10,color:"white",fontWeight:200}}>以及微信商城网站个性化定制开发服务。</p>
                </div>
                <div className="ServerItem">
                    <img src={require('../../image/service_img_02.jpg')} alt="home" width="100%" height="100%"/>
                </div>
                <div className="ServerItem">
                    <img src={require('../../image/xiaochengxu.png')} alt="app" style={{width:70,height:70}}/>
                    <p style={{fontSize:30,color:"white"}}>微信小程序开发</p>
                    <p style={{fontSize:17, marginTop:15,marginLeft:10,marginRight:10,color:"white",fontWeight:200}}>郑州佰胜网络科技有限公司为您提供全面的微信小程序开发</p>
                    <p style={{fontSize:17, marginTop:5,marginLeft:10,marginRight:10,color:"white",fontWeight:200}}>生成跨平台解决方案</p>
                </div>
                <div className="ServerItem">
                    <img src={require('../../image/service_img_03.jpg')} alt="home" width="100%" height="100%"/>
                </div>
                <div className="ServerItem">
                    <img src={require('../../image/h5e.png')} alt="app" style={{width:70,height:70}}/>
                    <p style={{fontSize:30,color:"white"}}>H5开发</p>
                    <p style={{fontSize:17, marginTop:15,marginLeft:10,marginRight:10,color:"white",fontWeight:200}}>HTML5是未来网络发展的趋势，可以实现各种多媒体效果</p>
                    <p style={{fontSize:17, marginTop:5,marginLeft:10,marginRight:10,color:"white",fontWeight:200}}>如视频、音频等无需任何插件即可观看收听。</p>
                </div>
                <div className="ServerItem">
                    <img src={require('../../image/service_img_04.jpg')} alt="home" width="100%" height="100%"/>
                </div>

            </div>
        )
    }

    render() {
        if (Utils.IsPhone()) {
            return this._renderPhone();
        }

        return(
            <div className="Server">
                <div className="ServerItem">
                    <img src={require('../../image/app.png')} alt="app" style={{width:90,height:90}}/>
                    <p style={{fontSize:40,color:"white"}}>APP开发</p>
                    <p style={{fontSize:17, marginTop:15,marginLeft:10,marginRight:10,color:"white",fontWeight:200}}>郑州佰胜网络科技有限公司拥有国内顶级IOS和安卓开发团队</p>
                    <p style={{fontSize:17, marginTop:5,marginLeft:10,marginRight:10,color:"white",fontWeight:200}}>为您提供一站式的手机app定制开发服务</p>
                    <p style={{fontSize:17, marginTop:5,marginLeft:10,marginRight:10,color:"white",fontWeight:200}}>实现传统行业到移动互联的完美转型。</p>
                </div>
                <div className="ServerItem">
                    <img src={require('../../image/service_img_01.jpg')} alt="home" width="100%" height="100%"/>
                </div>
                <div className="ServerItem">
                    <img src={require('../../image/service_img_02.jpg')} alt="home" width="100%" height="100%"/>
                </div>
                <div className="ServerItem">
                    <img src={require('../../image/weixinhao.png')} alt="app" style={{width:90,height:90}}/>
                    <p style={{fontSize:40,color:"white"}}>微信公众号开发</p>
                    <p style={{fontSize:17, marginTop:15,marginLeft:10,marginRight:10,color:"white",fontWeight:200}}>郑州佰胜网络科技有限公司为您提供专业的微信公众平台二次开发</p>
                    <p style={{fontSize:17, marginTop:5,marginLeft:10,marginRight:10,color:"white",fontWeight:200}}>以及微信商城网站个性化定制开发服务。</p>
                </div>
                <div className="ServerItem">
                    <img src={require('../../image/xiaochengxu.png')} alt="app" style={{width:90,height:90}}/>
                    <p style={{fontSize:40,color:"white"}}>微信小程序开发</p>
                    <p style={{fontSize:17, marginTop:15,marginLeft:10,marginRight:10,color:"white",fontWeight:200}}>郑州佰胜网络科技有限公司为您提供全面的微信小程序开发</p>
                    <p style={{fontSize:17, marginTop:5,marginLeft:10,marginRight:10,color:"white",fontWeight:200}}>生成跨平台解决方案</p>
                </div>
                <div className="ServerItem">
                    <img src={require('../../image/service_img_03.jpg')} alt="home" width="100%" height="100%"/>
                </div>
                <div className="ServerItem">
                    <img src={require('../../image/service_img_04.jpg')} alt="home" width="100%" height="100%"/>
                </div>
                <div className="ServerItem">
                    <img src={require('../../image/h5e.png')} alt="app" style={{width:90,height:90}}/>
                    <p style={{fontSize:40,color:"white"}}>H5开发</p>
                    <p style={{fontSize:17, marginTop:15,marginLeft:10,marginRight:10,color:"white",fontWeight:200}}>HTML5是未来网络发展的趋势，可以实现各种多媒体效果</p>
                    <p style={{fontSize:17, marginTop:5,marginLeft:10,marginRight:10,color:"white",fontWeight:200}}>如视频、音频等无需任何插件即可观看收听。</p>
                </div>

            </div>
        )
    }


    componentDidMount() {
        let width = window.screen.width;
        let height = width/3;
        if (Utils.IsPhone()) {
            height = width;
        }
        let items = document.getElementsByClassName("ServerItem");
        for (let i=0; i<items.length; i++) {
            items[i].style.height = height+"px";
            if (Utils.IsPhone()) {
                items[i].style.width = width+"px";
            }
        }
    }


}